<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Virtual Memory</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../layui/layui.js"></script>
    <script type="text/javascript" src="../anime/anime.min.js"></script>
    <script src="VirtualMem.js" type="module"></script>
</head>
<body>
<!--Top nav divs.-->
<div id="top_nav"></div>
<!--Concrete content.-->
<div class="layui-container">
    <!-- Virtual Memory -->
    <!--<div id="detail"></div>-->
    <br/>
    <div>
        <div style="overflow: hidden; height: 0">
            <div id="console"></div>
        </div>
        <button type="button" class="layui-btn" id="openWindow">打开Console</button>
    </div>
    <br/>
    <div id="canvas_here" style="width: 800px; margin: 10px auto;overflow: hidden; background-color: #F6F6F6">
        <div id="system_left" style="width: 100px; height: 500px; display: inline-block;float: left;">
            <!--这里的两者可以作为一个组件，动画包括pop、moveBegin、moveEnd、append-->
            <div style="margin: 10px; width: 78px; height: 200px;">
                <h3>空闲链表</h3>
                <div style="width: 76px; height: 180px; overflow: hidden; border: 1px solid black;"> <!-- 外层窗口 -->
                    <div id="innerTrack"><!-- 内层履带 --></div>
                </div>
            </div>
        </div>
        <div id="system_right" style="width: 698px; height: 500px; display: inline-block; float: left; overflow: hidden;" class="none-scroll-bar">
            <div id="right_modules">
                <div id="OS_module" style="width: 668px; margin: 10px auto; border: 1px solid gray; padding: 10px;">
                    <h1>系统区</h1>
                    <br/>
                    <div id="process_management">
                        <h2 style="margin-bottom: 8px;">进程管理</h2>
                        <div style="font-size: 16px; background-color: white; padding: 8px;">
                            <p style="margin: 8px;">运行态：<span id="runningProcess"></span></p>
                            <p style="margin: 8px;">就绪态：<span id="waitingProcess"></span></p>
                            <p style="margin: 8px;">阻塞态：<span id="blockingProcess"></span></p>
                        </div>
                    </div>
                    <br/>
                    <div id="system_file">
                        <h2>系统打开文件表</h2>
                        <div id="file_table">
                            <!--<table class="layui-table" >-->
                                <!--&lt;!&ndash; （页号，物理块号，状态位 P，访问字段 A，修改位 M，外存地址，LRU 信息） &ndash;&gt;-->
                                <!--<thead>-->
                                <!--<tr>-->
                                    <!--<th>Id</th>-->
                                    <!--<th>文件路径</th>-->
                                    <!--<th>inode 外存地址</th>-->
                                    <!--<th>inode 内存地址</th>-->
                                    <!--<th>锁信息</th>-->
                                    <!--<th>共享进程数</th>-->
                                <!--</tr>-->
                                <!--</thead>-->
                                <!--<tbody id="fileTableBody">-->
                                <!--<tr>-->
                                    <!--<td>0</td>-->
                                    <!--<td>08H</td>-->
                                    <!--<td>1</td>-->
                                    <!--<td>4</td>-->
                                    <!--<td>Null</td>-->
                                    <!--<td>3</td>-->
                                <!--</tr>-->
                                <!--</tbody>-->
                            <!--</table>-->
                        </div>
                    </div>
                    <br/>
                    <div id="disk_management">
                        <h2>超级块（Super Block）</h2>
                        <div>
                            <div id="file_path" style="margin-top: 8px; margin-bottom: 8px; font-size: 16px;">文件路径：</div>
                            <div style="height: 300px;">
                                <div style="width: 200px; height: 300px;display: inline-block; background-color: white; padding: 4px;">
                                    <p style="font-size: 16px; line-height: 18px; margin-bottom: 6px; margin-top: 6px;">目录：</p>
                                    <p style="font-size: 16px; line-height: 18px; margin-bottom: 6px;">inode：</p>
                                    <div>
                                        <table class="layui-table">
                                            <thead>
                                            <tr>
                                                <th>文件名</th>
                                                <th>inode</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr><td>Go.exe</td><td>08</td></tr>
                                            <tr><td>P.docx</td><td>09</td></tr>
                                            <tr><td>kkk</td><td>10</td></tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                </div>
                <div id="process_module" style="width: 668px; margin: 10px auto; border: 1px solid gray; padding: 10px;">
                    <h1>进程空间</h1>
                    <br/>
                    <div id="process_module_pcb" style="border: 1px solid grey; height: 140px; width: 140px; padding: 10px;">
                        <h2 style="margin-bottom: 6px;">PCB</h2>
                        <p id="PCB_PID" style="margin-top: 6px;">pid:&nbsp; </p>
                        <p id="PCB_State" style="margin-top: 6px;">当前状态:&nbsp; </p>
                        <p id="PCB_oldPc" style="margin-top: 6px;">PC保存值:&nbsp; </p>
                    </div>
                    <br/>
                    <div id="process_module_header" style="margin-bottom: 20px; margin-top: 10px; font-size: large">
                        PC寄存器的值：<span id="PCB_PC"></span> &nbsp;&nbsp;
                        当前执行指令：<span id="PCB_IR"></span> &nbsp;&nbsp;
                        地址变换：<span id="PCB_VAddress"></span> &nbsp; → &nbsp; <span id="PCB_realAddress"></span>
                    </div>
                    <div style="margin-bottom: 40px; overflow: hidden;" >
                        <div style="width: 480px; height: 340px; display: inline-block; overflow: hidden" >
                            <h2>页表</h2>
                            <div style="width: 450px; overflow: hidden; display: inline-block; height: 0px" id="pageTableDiv">
                                <table class="layui-table" id="pageTable">
                                    <!-- （页号，物理块号，状态位 P，访问字段 A，修改位 M，外存地址，LRU 信息） -->
                                    <thead>
                                    <tr>
                                        <th>页号</th>
                                        <th>物理块号</th>
                                        <th>状态位 P</th>
                                        <th>访问字段 A</th>
                                        <th>修改位 M</th>
                                        <th>外存地址</th>
                                        <th>LRU 信息</th>
                                    </tr>
                                    </thead>
                                    <tbody id="pageTableBody">
                                    <tr><td>0</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>3</td></tr>
                                    <tr><td>1</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>3</td></tr>
                                    <tr><td>2</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>3</td></tr>
                                    <tr><td>3</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>3</td></tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div style="width: 180px; height: 340px; display: inline-block; overflow: hidden">
                            <h2>内存页</h2>
                            <div id="pageDiv" style="width: 0px;min-height: 300px;overflow: hidden;">
                                这里是对应的页展开的内容
                            </div>
                        </div>
                    </div>
                    <div id="process_module_file_table" style="margin-bottom: 40px">
                        <h2>进程文件打开表</h2>
                        <div>
                            <table class="layui-table">
                                <!-- （页号，物理块号，状态位 P，访问字段 A，修改位 M，外存地址，LRU 信息） -->
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>文件名</th>
                                    <th>系统文件描述符</th>
                                    <th>读写指针</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>stdin</td>
                                    <td>2</td>
                                    <td>Null</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>stdout</td>
                                    <td>4</td>
                                    <td>Null</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>stderr</td>
                                    <td>6</td>
                                    <td>Null</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../functions/addCommonHeader.js"></script>
<script>
    layui.use(["layer", "jquery"], function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let consoleWindow = null;
        $("#openWindow").on("click", function () {
            if (consoleWindow){
                layer.close(consoleWindow);
                consoleWindow = null;
            }
            else{
                consoleWindow = layer.open({
                    type: 1,
                    title: "Console",
                    shade: false,
                    resize: false,
                    content: $("#console"),
                    end: ()=>{
                        consoleWindow = null;
                    }
                })
            }
        })
    })
</script>
</body>
</html>